<script setup lang="jsx">
import { reactive, ref } from 'vue';
import { Input } from 'ant-design-vue';
import { UUID } from 'uuidjs';
import { parseTime } from '@/utils';
import { planprodPlanlist, prodPlanexport } from '@/service/api/modules/scheduling';
import { useAuthStore } from '@/store/modules/auth';
import Search from './modules/search.vue';

const searchParams = ref({
  moduleNo: '',
  processId: '',
  paramCaption: '',
  wipState: '',
  pnType: '',
  modulepnTypeNo: '',
  time: ['', '']
});
const authStore = useAuthStore();
const pagination = reactive({
  current: 1,
  pageSize: 200,
  showSizeChanger: true,
  pageSizeOptions: ['50', '100', '200', '300', '500'],
  showQuickJumper: true,
  showTotal: total => {
    return `共${total}条`;
  },
  total: 0,
  onChange: async (current, size) => {
    pagination.current = current;
    pagination.pageSize = size;
    getData();
  }
});

const columns = ref([
  {
    key: 'index',
    dataIndex: 'index',
    title: '序号',
    width: 100,
    align: 'center',
    checked: true
  },
  {
    key: 'prodNo',
    dataIndex: 'prodNo',
    title: '产品型号',
    width: 170,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'holesTotal',
    dataIndex: 'holesTotal',
    title: '总孔数',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'orderNum',
    dataIndex: 'orderNum',
    title: '订单数量',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'processCaption',
    dataIndex: 'processCaption',
    title: '工序',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'techName',
    dataIndex: 'techName',
    title: '工艺',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'paramCaption',
    dataIndex: 'paramCaption',
    title: '表面处理',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },

  {
    key: 'prodDate',
    dataIndex: 'prodDate',
    title: '投料日期',
    width: 180,
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      if (record.prodDate == null) {
        return null;
      }
      return parseTime(record.prodDate);
    }
  },
  {
    key: 'ppcDate',
    dataIndex: 'ppcDate',
    title: '计划回复日期',
    width: 180,
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      if (record.ppcDate == null) {
        return null;
      }
      return parseTime(record.ppcDate);
    }
  },
  {
    key: 'wipQty',
    dataIndex: 'wipQty',
    title: '在线制程数量',
    width: 150,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'planQty',
    dataIndex: 'planQty',
    title: '计划完成数',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'pnlPcs',
    dataIndex: 'pnlPcs',
    title: 'PNL拼板数',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'remainTime',
    dataIndex: 'remainTime',
    title: '停留时间(小时)',
    width: 180,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'wipState',
    dataIndex: 'wipState',
    title: '工单状态',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'pnType',
    dataIndex: 'pnType',
    title: '生产类型',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'remark',
    dataIndex: 'remark',
    title: '备注',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  }
]);
const tableData = ref([]);
const loading = ref(false);
const defaultExpandedRowKeys = ref([]);

function getData() {
  loading.value = true;
  planprodPlanlist({
    pageSize: pagination.pageSize,
    pageNum: pagination.current,
    ...searchParams.value
  })
    .then(({ data, error }) => {
      if (!error) {
        data.list.forEach((item, index) => {
          item.index = index + 1;
          item.uid = UUID.genV4().hexNoDelim;
        });
        tableData.value = data.list;
        pagination.total = data.total;
      }
    })
    .finally(() => {
      loading.value = false;
    });
}

function exect() {
  prodPlanexport({
    pageSize: pagination.pageSize,
    pageNum: pagination.current,
    userId: authStore.userInfo.user.nickName,
    ...searchParams.value
  });
}
getData();

function search() {
  pagination.current = 1;
  getData();
}
const currentRowId = ref(null);
const customRow = record => {
  return {
    style: {
      background: record.uid === currentRowId.value ? '#BAEAFA' : ''
    },
    class: record.uid === currentRowId.value ? 'jl-table-row-selected' : '',
    onClick: () => {
      currentRowId.value = record.uid;
    }
  };
};
</script>

<template>
  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <Search v-model:model="searchParams" @reset="search()" @search="search()" />
    <ACard
      :bordered="false"
      :body-style="{ flex: 1, overflow: 'hidden' }"
      class="table-card flex-col-stretch sm:flex-1-hidden card-wrapper"
    >
      <template #title>
        <!--
 <AButton type="primary" size="small" ghost class="mini-btn mr-8px" @click="add()">
          <template #icon>
            <icon-ic-round-add class="align-sub text-icon" />
          </template>
          <span class="ml-3px">提 交</span>
        </AButton>
-->
        <AButton type="primary" size="small" ghost class="mini-btn mr-8px" @click="exect()">
          <template #icon></template>
          <span class="ml-3px">导出</span>
        </AButton>
      </template>
      <template #extra>
        <TableColumnSetting v-model:columns="columns" />
      </template>
      <STable
        :columns="columns"
        :data-source="tableData"
        size="small"
        bordered
        :loading="loading"
        :default-expanded-row-keys="defaultExpandedRowKeys"
        row-key="uid"
        :default-expand-all-rows="true"
        :pagination="pagination"
        :custom-row="customRow"
        class="h-full"
        :row-height="23"
      />
    </ACard>
  </div>
</template>

<style></style>
